{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<style>
        .account {
            width: 400px;
            margin: 0 auto;
        }
	</style>
</head>
<body>
<div class="account">
	<h1 style="text-align: center">注册</h1>
	<form id="formLogin">
		{% csrf_token %}
		{% for field in form %}
			{% if field.name == 'code' %}
				<div class="form-group">
					<label for="{{ field.id_for_label }}">{{ field.label }}</label>
					<div class="clearfix">
						<div class="col-md-4" style="padding-left: 0">{{ field }}</div>
						<div class="col-md-4">
							<input id="code" type="button" class="btn btn-default" value="点击获取验证码">
							<span></span>
						</div>
					</div>

				</div>
			{% else %}
				<div class="form-group">
					<label for="{{ field.id_for_label }}">{{ field.label }}</label>
					{{ field }}
				</div>
			{% endif %}


		{% endfor %}
		<button id="login" type="submit" class="btn btn-primary">注 册</button>
	</form>
</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/dist/js/bootstrap.min.js' %}"></script>
{% block js %} {% endblock %}
<script type="text/javascript">
    $(function () {
        bindCodeEvent();
        bindLoginEvent();
    })

    function bindCodeEvent() {
        $("#code").click(function () {
            let sign = this.value;
            console.log(this);
            this.classList.add('disabled');
            console.log(this);
            for (let time = 10; time > 0; time--) {
                if (sleep(1000)) {
                    this.value = time;
                    console.log(time);
                }

            }
            this.value = sign;
        });
    }

    function sleep(numberMillis) {
        let now = new Date();
        const exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return true;
        }
    }

    function bindLoginEvent() {
        $("#login").click((
            $.ajax({
                url: '/app01/register/',
                type: 'POST',
                data: {
                    'data': $('#formLogin').serialize(),
					'type': 'login'
				},
                dataType: 'JSON',
                success: function (res) {
                    console.log(res);
                }
            })
        ));
    }


</script>

</body>

</html>